<template>
    <ContentWrap style="border-radius: 20px;">
        <div class="headder">
            <div class="head-le">
                <p class="main-p">基本信息</p>
                <div class="main-le">
                    <div style="margin-right: 121px;">
                        <p class="bt">供应商名称：<span class="main-t">长风画卷</span></p>
                        <p class="bt">授权委托人：<span class="main-t">134-0297-2292</span></p>
                        <p class="bt">联系方式：<span class="main-t">134-0297-2292</span></p>
                    </div>
                    <div>
                        <p class="bt">法人：<span class="main-t">李小龙</span></p>
                        <p class="bt">所属行业：<span class="main-t">按摩</span></p>
                    </div>
                </div>

            </div>
            <div class="head-ri">
                <p class="main-p">资质证书</p>
                <div class="main-ri">
                    <img src="../../../assets/imgs/avatar.gif" alt="">
                    <img src="../../../assets/imgs/avatar.gif" alt="">
                    <img src="../../../assets/imgs/avatar.gif" alt="">
                    <img src="../../../assets/imgs/avatar.gif" alt="">
                </div>
            </div>
        </div>
        <div class="footer">
            <p class="main-p">历史合同</p>

            <el-table :data="tableData" stripe style="width: 100%;border-radius: 20px; background-color: #f9faff;">
                <el-table-column prop="name" label="合同名称" align="center" />
                <el-table-column prop="time" label="创建时间" align="center" />
                <el-table-column prop="address" label="合同状态" align="center" />

                <el-pagination background layout="prev, pager, next" :total="1000" />
            </el-table>
        </div>
    </ContentWrap>
</template>

<script setup lang="ts">
const tableData = reactive([])
</script>

<style lang="scss" scoped>
// 小圆点
.main-p {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 26.06px;
    color: rgba(0, 0, 0, 0.8);
    text-align: left;
    vertical-align: top;
    margin-bottom: 16px;
}

// 文字前面的点
.main-p::before {
    content: "●";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    color: rgba(81, 123, 255, 1);
    ;
}

.headder {
    display: flex;
    margin-bottom: 36px;

    .head-le {
        flex: 1;
        margin-right: 24px;

        .main-le {
            display: flex;
            border-radius: 16px;
            background: rgba(249, 250, 255, 1);

            padding: 24px;
        }

        .bt {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 23.17px;
            margin: 14px 0px;
            color: rgba(0, 0, 0, 0.6);

            .main-t {
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(0, 0, 0, 1);
                text-align: left;
                vertical-align: top;
            }
        }
    }

    .head-ri {
        flex: 1;

        .main-ri {
            display: flex;
            border-radius: 16px;
            background: rgba(249, 250, 255, 1);

            padding: 24px;

            img {
                width: 126px;
                border-radius: 20px;
                margin-right: 22px;
            }
        }
    }
}

.footer {

    ::v-deep.el-pagination.is-background .btn-prev,
    ::v-deep.el-pagination>.is-last {
        border-radius: 10px;
    }

    ::v-deep.el-pagination.is-background .el-pager li,
    .el-pagination.is-background .btn-prev {
        border-radius: 12px;
    }
}
</style>